import React, { useReducer, useState, useEffect, useContext } from 'react'
// 导入axios请求
import apiServe, { https } from '../../api/apiServer'
import { Swiper, Toast, Input } from 'antd-mobile'
import img1 from '../../assets/images/nav-1.png'
import img2 from '../../assets/images/nav-2.png'
import img3 from '../../assets/images/nav-3.png'
import img4 from '../../assets/images/nav-4.png'
// 引入样式
import './index.scss'
// 轮播图信息
function Index() {
	// 输入框信息
	const [searchInfo, setSearchInfo] = useState('')
	// 小组信息
	const [groupList, setgroupList] = useState([])
	// 最新资讯
	const [newsList, getNews] = useState([])
	// 图片资源
	const imgList = [
		{
			name: '整租',
			img: img1,
		},
		{
			name: '合租',
			img: img2,
		},
		{
			name: '地图找房',
			img: img3,
		},
		{
			name: '去出租',
			img: img4,
		},
	]
	// 轮播图数据
	const [swiperlist, setSwiper] = useState(imgList)
	// 初始化
	useEffect(async () => {
        // 轮播图
		let List = await apiServe.getSwiper()
		setSwiper(List.body)
		// 小组信息
		let groupList = await apiServe.getGroup()
	    setgroupList(groupList.body)
		// 最新资讯
		let newList = await apiServe.getNews()
		getNews(newList.body)
	}, [])
	return (
		<div className='home'>
			{/* 顶部轮播图 */}
			<div className='swiper'>
				<Swiper>
					{swiperlist.map((item, index) => {
						return (
							<Swiper.Item key={index}>
								<div
									className={['swiper-item']}
									onClick={() => {
										Toast.show(`你点击了卡片 ${index + 1}`)
									}}
								>
									<img src={`http://localhost:5001${item.imgSrc}`} />
								</div>
							</Swiper.Item>
						)
					})}
				</Swiper>
				{/* 搜索框 */}
				<div className='serach'>
					{/* input */}
					<div className='serach-left'>
						<div>上海</div>
						<Input
							className={['input-flex']}
							placeholder='请输入内容'
							value={searchInfo}
							onChange={val => {
								console.log(val)
								
							}}
						/>
					</div>
					{/* 地图 */}
					<div className='Map'>地图</div>
				</div>
			</div>
			{/* 中间选项 */}
			<div className='selectInfo'>
				{imgList.map((item, index) => {
					return (
						<div className='selectItem' key={index}>
							<img src={item.img} alt='' />
							<span>{item.name}</span>
						</div>
					)
				})}
			</div>
			{/* 标注层 */}
			<div className='infoText'>
				<div className='inof_left'>租房小组</div>
				<div className='info_right'>更多</div>
			</div>
			{/* 房源信息 */}
			<div className='fangyuaninfo'>
				{groupList.map((item, index) => {
					return (
						<div className='info-item' key={index}>
							<div className='info-item-left'>
								<p>{item.title}</p>
								<span>{item.desc}</span>
							</div>
							<div className='info-item-right'>
								<img src={`${https}${item.imgSrc}`} alt='' />
							</div>
						</div>
					)
				})}
			</div>

			{/* 最新资讯 */}
			<div className='news'>
				<h3 className='group-title'>最新资讯</h3>
				{newsList.map((item, index) => {
					return (
						<div className='news-item' key={index}>
							<div className='imgwrap'>
								<img className='img' src={`${https}${item.imgSrc}`} alt='' />
							</div>
							<div className='content' direction='column' justify='between'>
								<h3 className='title'>{item.title}</h3>
								<div className='info' justify='between'>
									<span>{item.from}</span>
									<span>{item.date}</span>
								</div>
							</div>
						</div>
					)
				})}
			</div>
		</div>
	)
}

export default Index
